<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>mock-脚手架</h2>
        <h3>旨在提供精简且开箱即用的脚手架 包含以下模块</h3>
        <el-timeline>
          <el-timeline-item>
            系统管理 (用户管理 + 角色管理 + 菜单管理 + 部门管理 + 岗位管理 + 字典管理 + 参数设置)
          </el-timeline-item>
          <el-timeline-item>
            系统监控 (服务监控）
          </el-timeline-item>
          <el-timeline-item>
            系统工具 (表单构建 + 系统接口）
          </el-timeline-item>
          <el-timeline-item>
            Vue 2.0 + Element-ui 前端框架
          </el-timeline-item>
          <el-timeline-item>
            SpringBoot + Spring Security 后端框架
          </el-timeline-item>
          <el-timeline-item>
            代码自动生成
          </el-timeline-item>
        </el-timeline>

        <p>
          <el-button type="primary" size="mini" icon="el-icon-cloudy" plain
                     @click="goTarget('https://www.yuque.com/bianjiawang/ak4z24/osv7z9bftq1yyoz1?singleDoc# 《Mock-脚手架》')">项目说明
          </el-button>
          <el-button size="mini" type="danger">禁止随意售卖
          </el-button>
        </p>

      </el-col>

      <el-col :sm="24" :lg="12">
        <el-card>
          <div slot="header" class="clearfix">
            <h1>公告</h1>
          </div>
          <p>
            1.禁止直接二次售卖。如若发现，会进行追责。
          </p>
          <p>
            2.部署过程中有任何疑惑，都可联系本人协助处理。
          </p>
          <p>
            3.其他项目会逐渐发布，可持续关注。
          </p>
          <p>
            4.当前线上没有开放写权限，所以部分写操作异常。
          </p>
        </el-card>
        <el-card>
          <div slot="header" class="clearfix">
            <h1>联系信息</h1>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-user-solid"></i>
              QQ：787599931
            </p>
            <p>
              <i class="el-icon-user-solid"></i>
              微信：bjw6665
            </p>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <el-divider/>
    <template>
      <el-carousel :interval="5000" type="card" height="300px">
        <el-carousel-item v-for="item in imageBox" :key="item.id">
          <img :src="item.idView" class="image">
        </el-carousel-item>
      </el-carousel>
    </template>

  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.2",
      // 走马灯
      imageBox: [{id: 0, idView: require('../assets/images/box/framework.png')},
        {id: 1, idView: require('../assets/images/box/books.png')},
        {id: 2, idView: require('../assets/images/box/study.png')}
      ]
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }


  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .image{
    /*设置图片宽度和浏览器宽度一致*/
    width:100%;
    height:inherit;
  }


}
</style>
